<template>
    <div :class="`detail-refund-info ${mode}`">
        <div class="title-and-price">
            <div class="title title-color">退款金额</div>
            <div class="price title-color"><span class="label">￥</span>{{price.toFixed(2)}}</div>
        </div>
        <div class="refund-tip">
            退款将原路返回您的支付账户，商家退款后，请前往账户确认是否已到账
        </div>
    </div>
</template>

<script>
import ModeMixin from '@common/mixin';
export default {
    name: 'DetailRefundInfo', // 退款详情
    mixins: [ModeMixin],
    props: {
        price: {
            type: Number,
            default: 0,
        },
    },
};
</script>

<style lang="less">
.detail-refund-info {
    .m-h(@shop-bag-gap);
    .mode-white();
    border-radius: @border-radius;
    .shop-boxshadow();
    .p-h(@shop-bag-gap);
    .p-v(@gap-md);
    .m-t(@shop-bag-gap);
    .title-and-price {
        .flex();
        justify-content: space-between;
        align-items: center;
        .title {
            font-size: @font-size;
            color: @text-color;
        }
        .price {
            font-size: @font-size-md;
            font-weight: 500;
            font-family: @font-family-number;
            color: @text-color;
            .label {
                .m-r(-3);
            }
        }
    }
    .refund-tip {
        .m-t(@shop-bag-gap);
        font-size: @shop-font-size;
        color: @tip-color;
    }
}
</style>
